<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./libs/react.js"></script>
    <script src="./libs/react-dom.js"></script>
    <script src="./libs/babel.min.js"></script>
    <script type="text/babel">
      const { Component } = React;
      class App extends Component {
        constructor(props) {
          super(props);
          this.state = {
            list: [],
            page: 1,
          };
          this.loadMore = this.loadMore.bind(this);
        }
        componentDidMount() {
          /* fetch("http://localhost:3009/api/v1/products")
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              this.setState({
                list: res.products,
              });
            }); */
          this.loadMore();
        }
        loadMore() {
          //   console.log(this.state);
          const { page, list } = this.state;
          fetch("http://localhost:3009/api/v1/products?page=" + page)
            .then((res) => res.json())
            .then((res) => {
              console.log(res);
              this.setState({
                list: [...list, ...res.products],
                page: page + 1,
              });
            });
        }
        render() {
          const { list } = this.state;
          console.count("执行了render方法");
          return (
            <div className="main">
              <p>我是一个list</p>
              <ul>
                {list.map((item) => (
                  <li key={item._id}>{item.name}</li>
                ))}
                <button onClick={this.loadMore}>点击加载更多</button>
              </ul>
            </div>
          );
        }
      }
      ReactDOM.render(<App />, document.getElementById("app"));
    </script>
  </body>
</html>
